
<!DOCTYPE html>
<html>
<head>
	<title>Atlas</title>
	<meta charset="utf-8" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="stylesheet" href="dist/leaflet.css" />
	<link rel="stylesheet" href="css/leaflet.css" />
	<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
	<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#scrollbar1').tinyscrollbar();	
		});
	</script>	
	
	
	
	<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }

</style>
	
	
</head>



<body >
<div style="width: 100%; height: 100%;">
	<div style="width: 100%; height: 30px; background-image:url(images/fon_main.jpg); border-color: #01a7ad; border-style: outset;">
	    <div id= "target" class="pointer" style="width: 158px;  height: 25px; background-image: url(images/knopka.jpg); position: absolute; border: 2px ridge #01a7ad" >
		
			<p  align = " center" style="margin: 5px auto;">Target</p>
		</div>
	</div>
	<div id="map" style="width: 100%; height: 100%; margin: auto; z-index: 1" >
	</div>
</div>
	
<div id="div_avto" style="top: 32px; width: 163px; height: 60%; position: absolute;  background-image: url(images/bg.png);
 z-index: 2;  
 border-right: 2px ridge #01a7ad;
 border-top: 2px ridge #01a7ad;
 visibility: visible">


 
<div id="scrollbar1" style="z-index: 2">
		<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
		<div class="viewport">
			 <div class="overview">
			 <table>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
				<tr>
				   <td>User1</td> <td>time</td> 
				</tr>
			 
			 </table>
			 
			 </div>
		</div>
	</div>		
			<div id="krutniz" align='center' valign "bottom" style="background-image: url(images/down.jpg)" >
			<p style= "visibility: hidden">vniz</p>
			
			</div>

 
 
</div>	




</body>
	
<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#scrollbarY').tinyscrollbar({ axis: 'x'});	
});
</script>




<script type="text/javascript">

var width=document.body.clientWidth; // ширина  
var height=document.body.clientHeight; // высота  
var height_div_avto;
var h;
h=100*50/height;
//h=h+"px";
h=100-h;
h=h+"%";
//alert(h);
 var h_txt;
 h_txt=100-(100*120)/height;
 h_txt= h_txt+"%";

height_div_avto =((height-50)/height)*100;
height_div_avto=height_div_avto+"%";
//alert(height_div_avto);
document.getElementById("map").style.height =  h;
document.getElementById("div_avto").style.height =  height_div_avto;
 

	
</script>

<script>
document.getElementById("target").onclick=target;
function target(){
	if(document.getElementById("div_avto").style.visibility=="visible"){
	document.getElementById("div_avto").style.visibility="hidden";
	}else{
	document.getElementById("div_avto").style.visibility="visible";
	}
}


</script>

<script src="dist/leaflet.js"></script>
	<script>

		var map;
		map	= L.map('map').setView([50.439, 30.497], 13);

		L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
		}).addTo(map);


		var myIcon=[];
		var is;
		for(var i=0; i<24; i++){
			is=i;
			if(i<10){
			is="0"+i;
			}
			
			myIcon[i] = L.icon({
				iconUrl: 'images/strelka/0000'+is+'.png',
				iconRetinaUrl: 'my-icon@2x.png',
				iconSize: [20, 20],
				iconAnchor: [10, 10],
				
			});
		}
		
		var marker=[];
		marker[0]=L.marker([50.439, 30.497], {icon: myIcon[2]}).bindPopup("I am a marker.");
		marker[0].addTo(map).openPopup();


		//map.removeLayer(marker[0]);
		
			
		L.circle([50.439, 30.477], 500, {
			color: 'red',
			fillColor: '#f03',
			fillOpacity: 0.5
		}).addTo(map).bindPopup("I am a circle.");

		L.polygon([
			[51.509, -0.08],
			[51.503, -0.06],
			[51.51, -0.047]
		]).addTo(map).bindPopup("I am a polygon.");


		var popup = L.popup();
		
		
		
/*
		function onMapClick(e) {
			popup
				.setLatLng(e.latlng)
				.setContent("You clicked the map at " + e.latlng.toString())
				.openOn(map);
		}

		map.on('click', onMapClick);
*/

map.on('click', onMapClick);

function onMapClick(e){

map.panTo(L.latLng(50.439, 30.397)); //центрирование карты
}

	</script>
</html>
